<template>
  <view class="login-container">
    <!-- 顶部logo -->
    <view class="logo-container">
      <image class="logo" src="/static/1024x1024.png" mode="aspectFit"></image>
    </view>
    
    <!-- 登录表单 -->
    <view class="form-container">
     <u-form ref="form" :model="formData" :rules="rules">
		<u-form-item label="名称" name="username">
			<u-input type="text" v-model="formData.username" placeholder="请输入姓名" />
		</u-form-item>
		<u-form-item label="密码" name="password">
			<u-input type="password" v-model="formData.password" placeholder="请输入密码" />
		</u-form-item>
	 </u-form>
      
      <button 
        class="login-btn" 
        :disabled="!canSubmit"
        :loading="loading"
        @click="handleLogin"
      >
        登录
      </button>
    </view>
  </view>
</template>

<script>
import { login } from '../../../config/api/api.js';
export default {
  data() {
    return {
      formData: {
        username: '',
        password: ''
      },
      loading: false,
	  rules: {
		username: [
			{
				required: true,
				message: '请输入姓名',
				// 可以单个或者同时写两个触发验证方式
				trigger: 'blur,change'
			}
		],
		password: [
			{
				min: 5,
				message: '密码不少于5',
				trigger: 'change'
			}
		]
	  }
    }
  },
  computed: {
    canSubmit() {
      return this.formData.username.trim() && this.formData.password.trim()
    }
  },
  methods: {
    // 处理登录
    handleLogin() {
		this.loading = true;
		this.$refs.form.validate().then(res => {
			login({
					  "ykno": this.formData.username,
					  "password": this.formData.password
			}).then(res => {
				// 登录成功处理
				if (res.code === 0) {
				  uni.showToast({
					title: '登录成功',
					icon: 'success'
				  })
				  
				  // 存储用户信息
				  uni.setStorageSync('token', res.data.token)
				  uni.setStorageSync('userInfo', res.data.userInfo)
				  this.$store.dispatch('login')
				  // 跳转到首页
				  setTimeout(() => {
					uni.navigateTo({
					  url: '/pages/choice/choice'
					})
				  }, 1500)
				} else {
				  uni.showToast({
					title: res.message || '登录失败',
					icon: 'none'
				  })
				}
			  }).catch(err => {
				this.loading = false
				console.log(err)
				uni.showToast({
				  title: err,
				  icon: 'none'
				})
			  })
		}).catch(err => {
			uni.hideLoading()
		})
		this.loading = false;
    }
  },
  onShow() {
  	uni.removeStorageSync('token');
  	uni.removeStorageSync('userInfo');
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f8f8f8;
}

.logo-container {
  display: flex;
  justify-content: center;
  margin-top: 80rpx;
  margin-bottom: 80rpx;
  
  .logo {
    width: 200rpx;
    height: 200rpx;
    border-radius: 20rpx;
  }
}

.form-container {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .form-item {
    margin-bottom: 40rpx;
    
    .label {
      display: block;
      font-size: 28rpx;
      color: #666;
      margin-bottom: 16rpx;
    }
    
    .input {
      height: 80rpx;
      border: 1rpx solid #eee;
      border-radius: 8rpx;
      padding: 0 20rpx;
      font-size: 30rpx;
    }
    
    .placeholder {
      color: #ccc;
      font-size: 28rpx;
    }
  }
  
  .login-btn {
    background-color: #007aff;
    color: #fff;
    border-radius: 8rpx;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    
    &[disabled] {
      background-color: #a0cfff;
    }
  }
}
</style>